<template>
    <div class="doc_view">
        <Data_show_mode_cp>
            <template #left>
                <el-tabs v-model="active_name" @tab-click="on_tab_name">
                    <el-tab-pane label="全部文档" name="all"></el-tab-pane>
                    <el-tab-pane label="DOC" name="doc"></el-tab-pane>
                    <el-tab-pane label="XLS" name="xls"></el-tab-pane>
                    <el-tab-pane label="PPT" name="ppt"></el-tab-pane>
                    <el-tab-pane label="PDF" name="pdf"></el-tab-pane>
                </el-tabs>
            </template>
        </Data_show_mode_cp>
    </div>
</template>

<script>
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
export default {  //文档文件视图
    name: 'Doc_view',
    components:{Data_show_mode_cp},
    data(){
        return{
            active_name: 'all', //标签页当前选择项
        };
    },
    created(){
    },
    methods: {
        on_tab_name(tab) { //标签被点击后触发
            console.log(tab);
        }
    },
}
</script>

<style scoped lang='scss'>
.doc_view{
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    line-height: 100%;
    /deep/.el-tabs__nav-wrap::after {
        background-color: #fafafa00;
    }
    /deep/.el-tabs__item {
        color: #828282;
    }
    /deep/.el-tabs__item.is-active {
        color: #409EFF;
    }
        
}
</style>
